<template>
  <div class="home">
    <div class="bg-hex-b2a8bb">123</div>
    {{ store }}
    <div class="home__demo">
      {{ isTeacher }}
    </div>
    <div>{{ chesi.user }}{{ show }}</div>
    <div class="text-fff d-flex jc-center">
      <div class="mr-10">样式</div>
      <div>布局</div>
    </div>
    <eialog></eialog>
    <el-button type="primary" @click="demo">Primary</el-button>
    <div class="relative">
      <canvas ref="theCanvas" width="800" height="400"></canvas>
    </div>

    <!-- <el-amap
      ref="map"
      vid="amapDemo"
      :center="[119.72899, 30.254775]"
      zoom="14"></el-amap> -->
    <div class="g-wrap">
      <div class="text">
        灵动的 iPhone
        新玩法，迎面而来。重大的安全新功能，为拯救生命而设计。创新的 4800
        万像素主摄，让细节纤毫毕现。更有 iPhone
        芯片中的速度之王，为一切提供强大原动力。
        <div class="bg"></div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useStore } from '../pinia'
import { storeToRefs } from 'pinia'
import eialog from './components/eialog.vue'
import dayjs from 'dayjs'

defineComponent({ eialog })
const store = useStore()
const { isTeacher, currentUsertype } = storeToRefs(store) // 必须如此使用不然会失去响应式

const demo = () => {
  store.$patch(state => {
    state.currentUsertype = 0
  })
  text.value = !text.value

  // open()
}

const $http = getCurrentInstance()!.appContext.config.globalProperties.$http

const open = async () => {
  try {
    const data = await $http.post('base_role_findRoleFunctionsByFuzzy', {
      params: {
        campusid: 202104339,
        userid: 2021050965,
        orgcode: 11799,
        key: '',
        token: '0d78fb004b7520b53c7bdc4c8ed957d1',
      },
      readonly: true,
      async: false,
      project: 'weixt_pc_platform',
    })
    console.log(data, 'data')
  } catch (error) {
    console.log(error)
  }
}
const text = ref(true)

const chesi = reactive({ user: 'cxc' })

const show = computed(() => {
  return text.value ? '真' : '假'
})

const aip = async () => {
  try {
    const data = await callApi.post('base_role_findRoleFunctionsByFuzzy', {
      params: {
        campusid: 202104339,
        userid: 2021050965,
        orgcode: 11799,
        key: '',
        // token: '0d78fb004b7520b53c7bdc4c8ed957d1',
      },
      readonly: true,
      async: false,
      project: 'weixt_pc_platform',
    })

    console.log(data, '这是callApi触发的')
  } catch (error) {
    console.log(error)
  }
}
const canvas = ref(null) as any
const theCanvas = ref(null) as any
let isAllowDrawLine = false
const windowToCanvas = (canvas, x, y) => {
  console.log(canvas, x, y)

  //获取canvas元素距离窗口的一些属性，MDN上有解释
  let rect = canvas.value.getBoundingClientRect()
  //x和y参数分别传入的是鼠标距离窗口的坐标，然后减去canvas距离窗口左边和顶部的距离。
  return {
    x: x - rect.left * (canvas.value.width / rect.width),
    y: y - rect.top * (canvas.value.height / rect.height),
  }
}
// aip()
onMounted(() => {
  let context = theCanvas.value.getContext('2d')

  context.beginPath()
  context.arc(100, 55, 50, 0, 360, false)
  context.fillStyle = 'rgba(192,80,77,0.7)' //半透明的红色
  context.strokeStyle = 'rgba(192,80,77,1)' //红色
  context.stroke()

  context.beginPath()
  context.arc(230, 55, 50, 0, 360, false)

  context.stroke()

  context.beginPath()
  context.arc(360, 55, 50, 0, 360, false)

  context.stroke()

  context.beginPath()
  context.arc(360, 180, 50, 0, 360, false)

  context.stroke()

  context.beginPath()
  context.arc(230, 180, 50, 0, 360, false)

  context.stroke()

  context.beginPath()
  context.arc(100, 180, 50, 0, 360, false)

  context.stroke()

  context.beginPath()
  context.arc(100, 300, 50, 0, 360, false)

  context.stroke()

  context.beginPath()
  context.arc(230, 300, 50, 0, 360, false)

  context.stroke()
  context.beginPath()
  context.arc(360, 300, 50, 0, 360, false)

  context.stroke()

  theCanvas.value.onmousedown = function (e) {
    isAllowDrawLine = true
    let posX = e.clientX
    let posY = e.clientY
    //获得鼠标按下的点相对canvas的坐标。
    let ele = windowToCanvas(theCanvas, e.clientX, e.clientY)
    //es6的解构赋值
    let { x, y } = ele
    //绘制起点。
    context.moveTo(x, y)

    //鼠标移动事件
    theCanvas.value.onmousemove = e => {
      //移动时获取新的坐标位置，用lineTo记录当前的坐标，然后stroke绘制上一个点到当前点的路径

      if (isAllowDrawLine) {
        console.log(Math.abs(e.clientX - posX), Math.abs(e.clientY - posY))

        let ele = windowToCanvas(theCanvas, e.clientX, e.clientY)
        let { x, y } = ele
        context.lineTo(x, y)
        context.stroke()
      }
    }
    theCanvas.value.onmouseup = function () {
      isAllowDrawLine = false
    }
  }
})
</script>

<style lang="scss" scoped>
.home {
  // background: red;

  &__demo {
    background: blueviolet;
  }
}

.g-wrap {
  width: 200px;
  // height: 400px;
  // background: #000;

  .text {
    position: relative;
    // color: transparent;
    color: #fff;
    background: #000;
    overflow: hidden;
  }

  .bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 400%;
    background: linear-gradient(
      -3deg,
      #000,
      #000 25%,
      #ffb6ff 30%,
      #ffb6ff,
      #b344ff,
      #b344ff 70%,
      #000 75%,
      #000
    );
    mix-blend-mode: darken;
    animation: textScroll 6s infinite linear alternate;
  }
}
@keyframes textScroll {
  100% {
    transform: translate(0, -75%);
  }
}
</style>
